<template>
    <div>
        <div class="preview-top">
            <div class="preview-top1">
                <div class="preview-top-content">
                    <div>
                        <span class="preview-title">{{CourseInfoData}}</span>
                        <!-- <span class="preview-line">/</span> -->
                        <!-- <span>第一章 R语言介绍及安装</span> -->
                    </div>
                </div>
            </div>
        </div>
        <div id="jx-contain">
            <div class="att-title">考勤名单</div>
            <div class="gray-line"></div>
            <div>
                <el-form :inline="true" class="demo-form-inline clearfix" :model="form">
                    <el-form-item label="班级信息 :" >
                        <el-cascader
                            :disabled="disabled"
                            class="cascader"
                            :options="data"
                            expand-trigger="hover"
                            :props="cascaderconfig"
                            clearable
                            change-on-select
                            v-model="selectedOptions"
                            ></el-cascader>
                    </el-form-item>
                    <el-button class="button-style btn" @click="search"   :disabled="disabled">搜&ensp;索</el-button>
                    <el-tooltip class="item" effect="dark" content="学生点击后签到，关闭签到后旷课次数自动统计。" placement="bottom">
                        <i  class="iconfont fr icon-wenti-m"></i>
                    </el-tooltip>
                    <div class="button-style btn fr" @click="studentSigned()" v-if="!flag">学生签到</div>
                    <div class="button-style btn fr"  @click="closeSigned()" v-if="flag">关闭签到 <i class="el-icon-loading"></i></div>
                </el-form>
            </div>
            <div class="tip">注：1.此列表按照默认班级检索 &nbsp;&nbsp;2.如果提问旷课数和考勤数大于999，学生旷课数以999计算</div>
            <div class="table">
                <el-table  :data="tableData" @sort-change='sortChange'  style="width: 100%"  id="tableT"  >
                    <el-table-column  type="index" label="序号" width="100"> </el-table-column>
                    <el-table-column  prop="username"  label="姓名" >  </el-table-column>
                    <el-table-column  prop="userNumber"  label="学号" >  </el-table-column>
                    <el-table-column  prop="className"  label="班级"  syu>  </el-table-column>
                    <el-table-column  prop="grade"  label="年份" >  </el-table-column>
                    <el-table-column    sortable prop="absentCount" label="旷课总次数" >
                        <template slot-scope="scope" >
                            <el-input-number v-model="scope.row.absentCount" @input="handel"  @change="handleChange(scope.row.absentCount,scope.row.userNumber,scope.row.userId,scope.row.classId)" :min="0" :max="999" label="旷课次数" ></el-input-number>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
        <el-dialog :close-on-click-modal="false" title="未签到名单" :visible.sync="questionVisible"  width="490px">
            <!-- <div class="title">已签到：{{closeStudentSign.recordedCount}}人</div>
            <div class="isOkName">
                 {{correctStudents}}
            </div> -->
            <div class="title " >未签到：{{closeStudentSign.unrecordedCount}}人</div>
            <div class="isOkName">
                <!-- {{incorrectStudents}} -->
                 <span class="studentName" v-for="item in incorrectStudents">{{item}}</span>

            </div>
        </el-dialog>

    </div>
</template>

<script>
    export default {
        data() {
        return {
            //基本配置
            cascaderconfig: {
                value: "name",
                label: "name",
            },
            //假定结果集合
            resultLists:'',
            //过滤已结课班级
            union:'',
            listBB:[],
            //课程Id
            courseId:'',
            //课程名称
            CourseInfoData:'',
            data:[],
            //排序
            sort:'',
            //表格数据
            tableData:[],
            //三级联动
            selectedOptions: [],
            //获取班级所有id集合
            idlist:[],
            form:{
                //年份
                chooseYear:'',
                optionsYear:[],
                //班级
                chooseClass:'',
                optionsclass:[],
            },
            //判断签到标识
            flag:'',
            //类型标识
            type:'',
            //签到详情弹窗
            questionVisible:false,
            //关闭签到数值
            closeStudentSign:'',
            //已签到人数
            correctStudents:'',
            //未签到人数
            incorrectStudents:'' ,
            //禁止下拉菜单
            disabled:false,
            //判断是签到还是关闭
            active:'',
            //行的id
            rowId:[],

            }
        },
        created () {
            //获取课程Id
            this.courseId = this.$localstorage.getLocalStorage('setCourseId')
            this.CourseInfoData =this.$route.query.CourseInfoData
            this.ClassList()

        },
        methods: {
            //三级联动获取数据
            ClassList(){
                let self = this
                self.$http.get('/tes/course/'+self.courseId+'/search/list-class?allFlag=true&defaultClassFlag=true').then((response) => {
                    let res = response.data
                    if(res.code == '200') {
                        self.type=3
                        self.data = self.setData(res.data)
                        self.resultLists = self.noCourse(res.data)
                        self.filterInitData(res.data)
                        self.ChangeList()
                    }else{
                        self.$message.error(res.message)
                    }
                })
            },
            //过滤出已结课所有id集合
            noCourse(data){
                let self =this
                data.forEach(function(item) {
                    if(item.name == '未结课'){
                        if(item.children){
                           item.children.forEach(function(a){
                              if(a.name!='全部' && a.children){
                                   a.children.forEach(function(bb){
                                     if(bb.name!='全部'){
                                       self.listBB.push(bb.id)
                                     }
                                  })
                               }
                           })
                        }
                    }
                })
            },
             //过滤数据获得默认值
            filterInitData(data){
                let self = this;
                data.forEach(function(item) {
                if (item.children) {
                    item.children.forEach(function(it) {
                        if (it.defaultedClass == true) {
                            self.selectedOptions.push(it.name)
                        }
                        if (it.children) {
                            it.children.forEach(function(itChild) {
                                if (itChild.defaultedClass == true) {
                                    self.selectedOptions.push(itChild.name)
                                }
                            })
                        }
                    })
                }
                });
               // console.log(self.selectedOptions, 11111)
                return self.selectedOptions
            },
            // 处理数据变成2级联动
            setData(list){
               let arrList = []
               let self = this
               let listFiltter =list.filter((item)=>{ return item.name == '未结课'})
                for(var i=0; i< listFiltter.length; i++){
                     let children2 = listFiltter[i].children
                    if( children2 && children2 != null){
                        for(var j =0; j<children2.length; j++){
                            let obj ={}
                            let children= []
                            obj.name = children2[j].name
                            obj.defaultedClass = children2[j].defaultedClass
                            if(children2[j].children && children2[j].children.length>0){
                                let children3 =children2[j].children
                                for(var k =0; k<children3.length; k++){
                                    let obj3={}
                                    obj3.name = children3[k].name
                                    obj3.defaultedClass = children3[k].defaultedClass
                                    children.push(obj3)
                                    //console.log(children,878)
                                }
                            }
                            if(children.length>0){
                                obj.children = children
                            }
                            arrList.push(obj)
                        }
                    }

                }
                return arrList;
            },
             //通过数据知道对应id集合
            ChangeList(){
                let self = this
                if(self.selectedOptions[0]===undefined || self.selectedOptions[0]=='全部'){
                    self.selectedOptions[1]=''
                    self.selectedOptions[0]=''
                }else if(self.selectedOptions[1]===undefined || self.selectedOptions[1]=='全部'){
                    self.selectedOptions[1]=''
                }
                self.$http.post('/tes/course/'+self.courseId+'/search/class',{
                    grade :self.selectedOptions[0],
                    name: self.selectedOptions[1],
                    status: '未结课'
                }) .then((response) => {
                    let res = response.data
                    if(res.code == '200') {
                      self.idlist=res.data

                     // self.signedList()
                       //成功后调取该方式
                      // self.commonFn()
                        switch (self.type) {
                            case 1:
                                self.Signed()
                                break;
                            case 2:
                                self.CloseSigned()
                                break;
                            case 3:
                                self.commonFn();
                                break;
                        }
                    }else if(res.code == '404'){
                        self.$message(res.message)
                    }else{
                        self.$message.error(res.message)
                    }
                }).catch(err => {
                      console.log(err)
                })
            },
            //搜索
            search(){
                let self = this;
                this.type = 3
                self.ChangeList()
                $('#tableT').find(".is-scrolling-none > table > tbody > tr").map(function(i){
                    $(this).css('background','#fff')
                    //给我点击的那个添加背景  我点击的那个通过学号可以获取到
                    //console.log($(this).find('td').eq(2).text(),99999999)
                    if(self.rowId.includes( $(this).find('td').eq(2).text())){
                        $(this).css('background','#fff')
                    }
                })

            },
            //公共方法
            commonFn(){
                let self = this
                self.$http.post( "/tes/attendance/query",{
                    sort: '',
                    classIdList: self.idlist
                    }).then(response => {
                        let res = response.data;
                        if (res.code == "200") {
                           self.tableData = res.data;
                            self.signedList()
                        } else {
                            self.$message.error(res.message);
                        }
                    })
                    .catch(err => {
                         console.log(err);
                });
            },
            //学生签到接口
            Signed(){
                let self = this
               // let classLists = Number(self.idlist.join(','))
                // console.log(self.listBB,'已结课')
                // console.log(self.idlist,'李辛发我')
                //let uion2 =  self.idlist.concat(self.listBB).filter(v => self.idlist.includes(v) && !self.listBB.includes(v))

                let uion2 = self.idlist.filter(v => self.listBB.includes(v))
                //console.log(uion2,456)

                self.$http.post( "/tes/attendance/begin-record",{
                    // classIdList: self.idlist
                    classIdList: uion2
                 }).then(response => {
                    let res = response.data;
                    if (res.code == "200") {
                      self.signedList()
                    //    let classLists = Number(self.idlist.join(','))
                    //    if(self.active.includes(classLists)){
                    //        self.flag =true
                    //       console.log('zai')
                    //    }else{
                    //        console.log('bu')
                    //        self.flag =false
                    //    }
                        //禁止搜索
                        self.disabled = true
                    }
                     else {
                        self.$message.error(res.message);
                    }
                    })
                 .catch(err => {
                    console.log(err);
                });
            },
            //此接口目的：判断签到还是关闭签到状态，得到这个老师当前签到的班级集合
            signedList(){
                let self = this
                self.$http.get( "/tes/attendance/current-record").then(response => {
                    let res = response.data;
                    if (res.code == "200") {
                        self.active = res.data
                        // let classLists = Number([9,10].join(','))
                         //console.log(self.idlist,9999999999)
                         //console.log(self.listBB,'已结课')
                         //console.log(self.active,'王晨给我')
                         //console.log(classLists,'123')
                         //求差集
                        //self.union =  self.active.concat(self.listBB).filter(v => self.active.includes(v) && !self.listBB.includes(v))
                        //求交集
                          self.union = self.active.filter(v => self.listBB.includes(v))
                        //   console.log(self.listBB,8888)
                        //   console.log(self.active,456)
                        //   console.log(self.union,9999)


                        // if(self.active.includes(classLists)){
                         if(self.union.length<=0 ){
                            self.flag =false
                            self.disabled = false
                           // console.log('关闭')
                        }else{
                            self.flag =true
                            self.disabled = true
                           // console.log('签到中...')
                        }
                     }
                     else {
                        self.$message.error(res.message);
                    }
                    })
                 .catch(err => {
                    console.log(err);
                });
            },
             //老师关闭签到
            CloseSigned(){
                let self = this
                self.$http.post( '/tes/attendance/end-record/'+self.courseId,{
                    classIdList: self.union
                 }).then(response => {
                    let res = response.data;
                    if (res.code == "200") {
                        //关闭签到的返回值
                        self.closeStudentSign = res.data
                        self.correctStudents = res.data.recordedNames
                        self.incorrectStudents = res.data.unrecordedNames

                        //禁止下拉菜单
                        self.disabled = false
                        //页面刷新
                        self.commonFn()
                         self.signedList()
                    }
                    else {
                        self.$message.error(res.message);
                    }
                    })
                 .catch(err => {
                    console.log(err);
                });
            },
             //控制显示数最多是999
            handel(value){
                if(value>999){
                    value = 999
                }
                //  document.getElementById("tableT").addEventListener("click", (e)=>{
                //     let cell= e.target
                //     if(cell.className=='el-input__inner'){
                //         $(cell).parent().parent().parent().parent().parent().css('background','#fafafa')
                //     }
                // })
            },
            //排序
            sortChange(column, prop, order){
                let self = this
               // self.type = 3
               self.type = ''
                if(column.order=='ascending'){ //升序
                   self.sort='asc'
                }else if(column.order=='descending'){//降序
                   self.sort='desc'
                }

                self.ChangeList()
                self.$http.post( "/tes/attendance/query",{
                    sort: self.sort,
                    classIdList: self.idlist
                    }).then(response => {
                        let res = response.data;
                        if (res.code == "200") {
                            self.tableData = res.data;
                            $('#tableT').find(".is-scrolling-none > table > tbody > tr").map(function(i){
                                $(this).css('background','#fff')
                                //给我点击的那个添加背景  我点击的那个通过学号可以获取到
                                //console.log($(this).find('td').eq(2).text(),99999999)
                                if(self.rowId.includes( $(this).find('td').eq(2).text())){
                                    $(this).css('background','#fafafa')
                                }
                            })
                        } else {
                            self.$message.error(res.message);
                        }
                    })
                    .catch(err => {
                         console.log(err);
                });
            },
            //单击排序旷课
            handleChange(absentCount,userNumber, userId,classId){

                let self = this;
                self.rowId.push(userNumber)
                //点击添加背景颜色
                document.getElementById("tableT").addEventListener("click", (e)=>{
                    let cell= e.target

                    if(cell.className=='el-icon-plus'){
                        //点击+
                        $(cell).parent().parent().parent().parent().parent().css('background','#fafafa')
                    }else if(cell.className=='el-icon-minus'){
                        //点击-
                        $(cell).parent().parent().parent().parent().parent().css('background','#fafafa')
                    }
                })
                self.$http.post( "/tes/attendance",{
                    courseId: self.courseId,
                    classId: classId,
                    userId:userId,
                    absentCount: absentCount
                }).then(response => {
                let res = response.data;
                if (res.code == "200") {

                } else {
                    self.$message.error(res.message);
                }
                }).catch(err => {
                    console.log(err);
                });
            },
            //学生签到 学生端接收信息
            studentSigned(){
                this.type=1
               // this.flag = true
                this.Signed()


            },
            //关闭学生签到
            closeSigned(){
                this.type=2
                //this.flag = false
                this.CloseSigned()
                this.questionVisible =true


            }
        }

    };
</script>
<style scoped>
    /* .el-table--enable-row-hover>>>.el-table__body tr:hover>td{
        background-color: #c6cfdf !important;
    } */
     .table>>>tr:hover>td {
         background-color: #fafafa;
     }
    .el-dialog__body{
        padding:30px 50px
    }
    .icon-wenti-m{
        cursor: pointer;
    }
    .studentName{
        border-right: 1px solid #eeeeee;
        display: inline-block;
        width: 111px;
        text-align: center;
        height: 35px;
        line-height: 35px;
    }
    .studentName:nth-child(4n){
        border-right: none
    }
    .isOkName{
        font-size: 14px;
        color: #727272;
        line-height: 1.7;
         margin-bottom:20px;
    }
    .title{
        font-size: 16px;
        margin-bottom: 30px;
        text-align: center;
        color: #385899;
        margin-top: 10px;
        font-weight:bold;
    }
    .titleTop{
        margin-top: 20px
    }
    .btn{
        margin-top: 4px
    }

    .el-select>>>.el-input__icon{
        line-height: 32px;
    }
    .el-input-number>>>.el-input__inner{
        height: 40px;
        background: transparent
    }
    .el-table__row  .el-input-number>>>.el-input__inner{
        border: none;
    }
    .el-table__row  .el-input-number>>>.el-input-number__decrease, .el-table__row  .el-input-number>>>.el-input-number__increase{
        height: 17px;
        width: 17px;
        border-radius: 50%;
        border: 1px solid #385899;
        top: 10px;
        color: #385899;
    }
    .el-table__row  .el-input-number>>>.el-input-number__decrease{
       left: 46px;
    }
    .el-table__row  .el-input-number>>>.el-input-number__increase{
       right: 46px;
    }
    .el-table__row   .el-input-number>>>[class*=" el-icon-"],.el-table__row  .el-input-number>>> [class^=el-icon-]{
        position: absolute;
        left: 0px;
        top: 0px;
        font-weight: bold;
        width: 100%;
        height: 100%;
        padding-top:2px;
    }
</style>
<style scoped lang="scss">
    @import "./../../../styles/ypublic.scss";
    .preview-top {
        height: 60px;
        margin: 0 auto;
        .preview-top1 {
            width: 100%;
            height: 60px;
            line-height: 60px;
            background: #101937;
            position: fixed;
            top: 0;
            color: #fff;
            font-size: 14px;
            z-index: 2;
            .preview-top-content {
                width:1200px;
                margin:0 auto;
                span{
                    margin-right:40px;
                }
                .preview-title {
                    font-size: 18px;
                    margin-right:0;
                }
                .preview-line{
                    margin:0 6px;
                }
            }
        }
        .preview-top2 {
            width: 100%;
            height: 60px;
            line-height: 60px;
            position: fixed;
            top: 80px;
            padding:0;
            font-size: 14px;
            .preview-top-content{
                width:1200px;
                margin:0 auto;
                padding:0 40px;
                .button-style{
                    margin-left:20px;

                }
            }
        }
    }
    #jx-contain{
        width: 1120px;
        height: auto;
        overflow: hidden;
        margin: 40px auto 0;
        background: $white;
        padding: 16px 40px;
        .att-title{
            color: $blue;
            font-size: $fs16;
            margin-bottom: 16px;
        }
        .gray-line{
            background: $grayLine;
            height: 1px;
            width: 1200px;
            margin: 0 0 24px -40px;
        }
    }
    .tip{
        color: $btn-blue;
        margin: 22px 0 40px;
    }
    .iconfont {
        margin: 15px 0 0 10px;
        font-size: 14px;
        color: #385899;
    }
    .table{
        margin: 20px 0;
    }

</style>
